<template>
  <div>
    <search-form @search="getTableData()" @reset="searchReset">
      <el-col :span="8" :xs="24" v-if="$permiss[1519]">
        <el-form-item :label="$t('所属租户')">
          <el-select @change="getSelect" v-model="page.adminUserId" style="width: 100%" clearable>
            <el-option v-for="item in tenantList" :key="item.adminUserId" :label="item.adminName"
                       :value="item.adminUserId"></el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="8" :xs="24" v-if="$permiss[1520]">
        <el-form-item :label="$t('APP名称')">
          <el-select @change="productChange" style="width: 100%" v-model="page.productName" clearable>
            <el-option v-for="item in productList" :key="item.productId" :label="item.appName"
                       :value="item.productName"></el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="8" :xs="24" v-if="$permiss[1521]">
        <el-form-item :label="$t('经理名称')">
          <el-select v-model="page.managerId" @change="managerChange" style="width: 100%" clearable>
            <el-option v-for="item in managerList" :key="item.adminUserId" :label="item.adminName"
                       :value="item.adminUserId"></el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="8" :xs="24" v-if="$permiss[1522]">
        <el-form-item :label="$t('角色名称')">
          <el-select @change="selectRole" v-model="page.type" style="width: 100%">
            <el-option v-for="item in selectRoleList" :key="item.type" :value="item.type"
                       :label="item.name"></el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="8" :xs="24" v-if="$permiss[1523]">
        <el-form-item :label="$t('信审员')">
          <el-select style="width: 100%" v-model="page.auditId" clearable>
            <el-option v-for="item in auditPersonnel" :key="item.adminUserId" :label="item.adminName"
                       :value="item.adminUserId"></el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="8" :xs="24">
        <el-form-item :label="$t('用户类型')">
          <el-select style="width: 100%" v-model="page.isRepeatedBorrowing" clearable>
            <el-option :value="0" :label="$t('新客')"></el-option>
            <el-option :value="1" :label="$t('老客')"></el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="12" :xs="24">
        <el-form-item :label="$t('日期')">
          <el-date-picker
              v-model="page.timeValue"
              style="width: 100%"
              :clearable="false"
              type="daterange"
              value-format="yyyy-MM-dd"
              range-separator="~"
              :start-placeholder="$t('开始日期')"
              :end-placeholder="$t('结束日期')">i
          </el-date-picker>
        </el-form-item>
      </el-col>
    </search-form>
    <el-card shadow="never" style="margin-top: 10px">
      <Table @handleSizeChange="handleSizeChange" :loading="loading"
             @handleCurrentChange="handleCurrentChange" :table-column="tableColumn" :table-data="tableData"
             :page="page"/>
    </el-card>
  </div>
</template>

<script>
import {dateFormatSection} from "@/utils/tools";
import {defaultTimeDate} from "@/utils/tools";
import {selectProduct, selectTenant, selectAuditStaff, selectManager, searchRoleName} from "@/api/system";
import {auditPeopleRankIng, auditPeopleRankingTotal} from '@/api/order'

export default {
  name: 'Reviewer',
  data() {
    return {
      page: {
        pageNum: 1,
        pageSize: 10,
        total: 0,
        timeValue: defaultTimeDate(7)
      },
      tableData: [],
      tableColumn: [
        {label: this.$t('公司排名'), prop: 'serialNumber', minWidth: 100, fixed: 'left', headerTips: this.$t('按通过率排名')},
        {
          label: this.$t('组内排名'),
          prop: 'groupSerialNumber',
          minWidth: 100,
          fixed: 'left',
          headerTips: this.$t('按通过率排名')
        },
        {label: this.$t('信审员'), prop: 'auditName', minWidth: 100, fixed: 'left'},
        {label: this.$t('角色名称'), prop: 'name', minWidth: 150},
        {label: this.$t('打款数'), prop: 'pay', minWidth: 100},
        {label: this.$t('订单总数'), prop: 'count'},
        {label: this.$t('新增订单数'), prop: 'apply', minWidth: 100},
        {label: this.$t('待审数'), prop: 'pending'},
        {label: this.$t('已审数'), prop: 'audited'},
        {label: this.$t('通过数'), prop: 'pass'},
        {label: this.$t('拒绝数'), prop: 'refuse'},
        {label: this.$t('关闭数'), prop: 'close'},
        {label: this.$t('处理率'), prop: 'disposeRate'},
        {label: this.$t('通过率'), prop: 'passRate'},
        {label: this.$t('拒绝率'), prop: 'refuseRate'},
        {label: this.$t('关闭率'), prop: 'closeRate'},
        {label: this.$t('D0'), prop: 'd0'},
        {label: this.$t('D3'), prop: 'd3'},
        {label: this.$t('坏账率'), prop: 'badDebtsRate',},
      ],
      tenantList: [],
      productList: [],
      managerList: [],
      auditPersonnel: [],
      selectRoleList: [],
      loading: false
    }
  },
  async mounted() {
    selectTenant().then(res => {
      this.tenantList = res.data
    })
    this.getSelect()
    await this.selectRoleName()
    this.getTableData()
  },
  methods: {
    async getSelect() {
      const {managerId, adminUserId, productName, type} = this.page
      this.selectManager()
      selectAuditStaff({managerId, adminUserId, productName, type}).then(res => {
        this.auditPersonnel = res.data
      })
      selectProduct({adminUserId}).then(res => {
        this.productList = res.data
      })
    },
    searchReset() {
      this.page = {
        pageNum: 1,
        pageSize: 10,
        total: 0,
        timeValue: defaultTimeDate(7)
      }
      this.getSelect()
      this.getTableData()
    },
    handleCurrentChange(val) {
      this.page.pageNum = val
      this.getTableData()
    },
    handleSizeChange(val) {
      this.page.pageSize = val
      this.getTableData()
    },
    async getTableData() {
      this.loading = true
      const [datetimeStart, datetimeEnd] = dateFormatSection(this.page.timeValue || [])
      const params = {
        ...this.page, datetimeStart, datetimeEnd
      }
      delete params.timeValue
      const res = await auditPeopleRankIng(params)
      if (res.code === 1) {
        const {list, total} = res.data
        this.tableData = list
        this.page = {...this.page, total}
        await this.getReportTotal(params)
        this.loading = false
      }
    },
    // 获取合计
    async getReportTotal(params) {
      const res = await auditPeopleRankingTotal(params)
      if (res.code === 1) {
        if (this.tableData.length > 0) {
          this.tableData.unshift({...res.data, serialNumber: this.$t('合计')})
        } else {
          this.tableData = []
        }
      }
    },
    // 获取经理下拉
    async selectManager() {
      if (this.$permiss[1521]) {
        const {adminUserId, productName} = this.page
        const res = await selectManager({
          adminUserId, productName, type: 3
        })
        if (res.code === 1) this.managerList = res.data
      }
    },
    // 获取角色名称下拉
    async selectRoleName() {
      if (this.$permiss[1522]) {
        const res = await searchRoleName()
        if (res.code === 1) {
          this.selectRoleList = res.data
          this.$set(this.page, 'type', this.selectRoleList[0].type)
        }
      }
    },
    // 经理姓名下拉
    managerChange() {
      const {managerId, adminUserId, productName, type} = this.page
      selectAuditStaff({managerId, adminUserId, productName, type}).then(res => {
        this.auditPersonnel = res.data
      })
    },
    // APP下拉
    productChange() {
      const {managerId, adminUserId, productName, type} = this.page
      this.selectManager()
      this.selectRoleName()
      selectAuditStaff({managerId, adminUserId, productName, type}).then(res => {
        this.auditPersonnel = res.data
      })
    },
    //角色名称下拉
    selectRole() {
      const {managerId, adminUserId, productName, type} = this.page
      selectAuditStaff({managerId, adminUserId, productName, type}).then(res => {
        this.auditPersonnel = res.data
      })
    }
  },

}
</script>

<style scoped>

</style>
